<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Canvas圆形进度条Loading代码 - 站长素材</title>

<style>
/*框架预览 CSS*/
* { margin: 0; padding: 0; }
body { text-align: center; background-color: #0cc; }
@media only screen and (max-width:900px){
.mkeButton {display:block; margin:8px auto 0;}
}
@media only screen and (max-width:767px){
}
/*End*/
.box{
	display: -webkit-flex;
	justify-content: center;
	margin-top: 10px;
}
</style>

</head>
<body>
	<div class="box">
		<canvas id="canvas" width="90" height="90" style="background:#fff8df;margin-right: 60px;border-radius: 50%;"></canvas>
		<canvas id="canvas2" width="90" height="90" style="background:#fbeaed;border-radius: 50%;"></canvas>
	</div>
<script>
    window.onload = function(){
    	!(function(){
	    	function Canvas (oCanvas,lineColor,textColor){
	    		this.canvas = oCanvas;
	    		this.lineColor = lineColor;
	    		this.textColor = textColor;
	    		this.context = this.canvas.getContext('2d');  //获取画图环境，指明为2d
	            this.centerX = this.canvas.width/2;   //Canvas中心点x轴坐标
	            this.centerY = this.canvas.height/2;  //Canvas中心点y轴坐标
	            this.rad = Math.PI*2/100; //将360度分成100份，那么每一份就是rad度
	            this.speed = 0.1; //加载的快慢就靠它了 
	            this.drawFrame();
	    	};
	    	
	        //绘制蓝色外圈
	        Canvas.prototype.blueCircle =  function (n){
	           this.context.save();
	           this.context.strokeStyle = this.lineColor; //设置描边样式
	           this.context.lineWidth = 7; //设置线宽
	           this.context.beginPath(); //路径开始
	           this.context.arc(this.centerX, this.centerY, 30 , -Math.PI/2, -Math.PI/2 +n*this.rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
	           this.context.stroke(); //绘制
	           this.context.closePath(); //路径结束
	           this.context.restore();
	        };
	        //绘制白色外圈
	        Canvas.prototype.whiteCircle = function (){
	            this.context.save();
	            this.context.beginPath();
	            this.context.strokeStyle = this.lineColor;
	            this.context.arc(this.centerX, this.centerY, 30 , 0, Math.PI*2, false);
	            this.context.stroke();
	            this.context.closePath();
	            this.context.restore();
	        };
	        //百分比文字绘制
	       Canvas.prototype.text= function (n){
	            this.context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
	            this.context.strokeStyle = this.textColor; //设置描边样式
	            this.context.font = "25px"; //设置字体大小和字体
	            //绘制字体，并且指定位置
	            this.context.strokeText(n.toFixed(0)+"%", this.centerX-11, this.centerY+8);
	            this.context.stroke(); //执行绘制
	            this.context.restore();
	       };
	        //动画循环
	   	 	Canvas.prototype.drawFrame = function(){
	   	 		var _this = this;
	            _this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
	            _this.whiteCircle();
	            _this.text(_this.speed);
	            _this.blueCircle(_this.speed);
	            if(_this.speed > 100){
	            	_this.speed = 0;
	            	
	            }else{
	        	  window.requestAnimationFrame(function(){
	        	  	_this.drawFrame();
	        	  }, _this.canvas);
	            }
	           _this.speed += 0.1;
	        };
        	
        	!(function(){
        		var oCanvas = document.getElementById('canvas');  //获取canvas元素
        		new Canvas(oCanvas,'#ffdb60','#e6ad14');
        	})();
        	
        	!(function(){
        		var oCanvas = document.getElementById('canvas2');  //获取canvas元素
        		new Canvas(oCanvas,'#ed96a7','#ec6a6a');
        	})();
        	
        })();
    }
</script>
</body>
</html>